<template>
  <div class="post-card" :class="{ loading: loading }">
    <!-- 作者信息 -->
    <div class="post-header">
      <div class="author-info">
        <el-avatar
          :size="40"
          :src="post.author.avatar"
          @error="handleAvatarError"
        />
        <div class="author-meta">
          <div class="author-name">{{ post.author.name }}</div>
          <div class="post-time">{{ formatTime(post.createdAt) }}</div>
        </div>
      </div>
      <div class="post-actions">
        <el-dropdown trigger="click" @command="handleMoreAction">
          <el-button type="text">
            <el-icon><More /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="edit" v-if="isAuthor"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item command="delete" v-if="isAuthor"
                >删除</el-dropdown-item
              >
              <el-dropdown-item command="report" v-else>举报</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 文章内容 -->
    <div class="post-content">
      <!-- 文字内容 -->
      <div
        v-if="post.content"
        class="content-text"
        :class="{ expanded: expanded }"
      >
        {{ post.content }}
      </div>
      <div
        v-if="post.content && post.content.length > 200"
        class="expand-button"
      >
        <el-button type="text" @click="expanded = !expanded">
          {{ expanded ? "收起" : "展开全文" }}
        </el-button>
      </div>

      <!-- 图片内容 -->
      <div v-if="post.images && post.images.length" class="content-images">
        <el-image
          v-for="(image, index) in post.images"
          :key="index"
          :src="image"
          :preview-src-list="post.images"
          fit="cover"
          class="content-image"
          :class="getImageClass(post.images.length)"
        />
      </div>

      <!-- 视频内容 -->
      <div v-if="post.video" class="content-video">
        <video
          :src="post.video"
          controls
          class="video-player"
          :poster="post.videoCover"
        ></video>
      </div>

      <!-- 位置信息 -->
      <div v-if="post.location" class="content-location">
        <el-icon><Location /></el-icon>
        <span>{{ post.location }}</span>
      </div>
    </div>

    <!-- 互动区域 -->
    <div class="post-interaction">
      <div class="interaction-stats">
        <span class="stat-item">
          <el-icon><View /></el-icon>
          {{ formatNumber(post.views) }}
        </span>
        <span class="stat-item">
          <el-icon><ChatDotRound /></el-icon>
          {{ formatNumber(post.comments) }}
        </span>
        <span class="stat-item">
          <el-icon><Star /></el-icon>
          {{ formatNumber(post.favorites) }}
        </span>
      </div>
      <div class="interaction-buttons">
        <el-button
          type="text"
          :class="{ 'is-liked': post.isLiked }"
          @click="handleLike"
        >
          <el-icon><ThumbsUp /></el-icon>
          点赞 {{ formatNumber(post.likes) }}
        </el-button>
        <el-button type="text" @click="handleComment">
          <el-icon><ChatDotRound /></el-icon>
          评论
        </el-button>
        <el-button type="text" @click="handleShare">
          <el-icon><Share /></el-icon>
          分享
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-mask">
      <el-skeleton :rows="3" animated />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import {
  More,
  Location,
  View,
  ChatDotRound,
  Star,
  ThumbsUp,
  Share,
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const props = defineProps({
  post: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits([
  "like",
  "comment",
  "share",
  "edit",
  "delete",
  "report",
]);

const expanded = ref(false);

// 判断是否为作者
const isAuthor = computed(() => {
  // TODO: 根据实际用户系统判断
  return props.post.author?.id === "currentUserId";
});

// 处理头像加载错误
const handleAvatarError = () => {
  // 设置默认头像
};

// 格式化时间
const formatTime = (time) => {
  // TODO: 根据需求实现时间格式化
  return new Date(time).toLocaleString();
};

// 格式化数字
const formatNumber = (num) => {
  return new Intl.NumberFormat().format(num);
};

// 获取图片布局类名
const getImageClass = (count) => {
  return {
    single: count === 1,
    double: count === 2,
    triple: count === 3,
    grid: count > 3,
  };
};

// 处理更多操作
const handleMoreAction = (command) => {
  switch (command) {
    case "edit":
      emit("edit", props.post);
      break;
    case "delete":
      emit("delete", props.post);
      break;
    case "report":
      emit("report", props.post);
      break;
  }
};

// 处理点赞
const handleLike = () => {
  emit("like", props.post);
};

// 处理评论
const handleComment = () => {
  emit("comment", props.post);
};

// 处理分享
const handleShare = () => {
  emit("share", props.post);
};
</script>

<style lang="scss" scoped>
.post-card {
  @apply bg-white rounded-lg shadow-sm mb-4 overflow-hidden relative;

  .post-header {
    @apply flex items-center justify-between p-4 border-b border-gray-100;

    .author-info {
      @apply flex items-center;

      .author-meta {
        @apply ml-3;

        .author-name {
          @apply text-gray-900 font-medium;
        }

        .post-time {
          @apply text-sm text-gray-500;
        }
      }
    }
  }

  .post-content {
    @apply p-4;

    .content-text {
      @apply text-gray-700 mb-4 leading-relaxed;
      max-height: 4.5rem;
      overflow: hidden;

      &.expanded {
        max-height: none;
      }
    }

    .expand-button {
      @apply mb-4;
    }

    .content-images {
      @apply grid gap-2 mb-4;
      grid-template-columns: repeat(3, 1fr);

      .content-image {
        @apply rounded-lg overflow-hidden;
        aspect-ratio: 1;

        &.single {
          grid-column: span 3;
          aspect-ratio: 16/9;
        }

        &.double {
          grid-column: span 3/2;
        }

        &.triple {
          grid-column: span 1;
        }
      }
    }

    .content-video {
      @apply mb-4 rounded-lg overflow-hidden;

      .video-player {
        @apply w-full;
        aspect-ratio: 16/9;
      }
    }

    .content-location {
      @apply flex items-center text-sm text-gray-500;

      .el-icon {
        @apply mr-1;
      }
    }
  }

  .post-interaction {
    @apply p-4 border-t border-gray-100;

    .interaction-stats {
      @apply flex items-center mb-2;

      .stat-item {
        @apply flex items-center text-sm text-gray-500 mr-4;

        .el-icon {
          @apply mr-1;
        }
      }
    }

    .interaction-buttons {
      @apply flex items-center space-x-4;

      .el-button {
        @apply flex items-center;

        &.is-liked {
          @apply text-primary-600;
        }

        .el-icon {
          @apply mr-1;
        }
      }
    }
  }

  .loading-mask {
    @apply absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center p-4;
  }
}
</style>
